<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>郭明龙&王李芳</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimun=1.0,user-scalable=no">
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        body{
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-image: url(img/timg.jpg);
            background-size: 100% 100%;
        }
        section{
            width: 100vw;
            height: 100vh;
            position: relative;
            transform-style: preserve-3d;
            animation: xuanzhuan 5s linear infinite;      
        }
        
        div{
            width: 30vw;
            height: 40vw;
            background-size: 100%;
            background-repeat: no-repeat;
            position: absolute;
            left: calc(50% - 30vw/2);
            top: calc(50% - 30vw/2);
            animation: back 10s linear forwards;
        }
        .one{
            background-image: url(img/psa.jpg);
            transform: translateX(15vw) translateZ(36vw) rotateY(22.5deg);           
        }
        .two{
            background-image: url(img/psb.jpg);
            transform: translateX(-15vw) translateZ(36vw) rotateY(-22.5deg);
        }
        .three{
            background-image: url(img/psc.jpg);
            transform: translateX(15vw) translateZ(-36vw) rotateY(-22.5deg);
        }
        .four{
            background-image: url(img/psd.jpg);
            transform: translateX(-15vw) translateZ(-36vw)  rotateY(22.5deg);
        }
        .five{
            background-image: url(img/psl.jpg);
            transform: translateX(36vw) translateZ(15vw) rotateY(67.5deg);
        }
        .six{
            background-image: url(img/psq.jpg);
            transform: translateX(36vw) translateZ(-15vw) rotateY(-67.5deg);
        }
        .seven{
            background-image: url(img/psp.jpg);
            transform: translateX(-36vw) translateZ(-15vw) rotateY(67.5deg);
        }
        .eight{
            background-image: url(img/psg.jpg);
            transform: translateX(-36vw) translateZ(15vw) rotateY(-67.5deg);
        }
        
        
        @keyframes xuanzhuan{
            0%{
                transform: rotateY(0deg)
            }
            100%{
                transform: rotateY(360deg)
            }
        }
        
        .musicPlay{
            width: 8.5vw;
            height: 8.5vw;
            background-image: url(img/sound.png);
            background-size: 100%;
            position: absolute;
            top: 2vw;
            right: 2vw;
        }           
        
        @keyframes back{
            0%{
                height: 0px;
            }
            50%{
                height: 20vw;
            }
            100%{
                height: 40vw;
            }
        }
        
        
        @media screen and (orientation: landscape){
            div{
            width: 40vh;
            height: 50vh;
            }
        }
    </style>
    
</head>
<body>
    <section>
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
        <div class="five"></div>
        <div class="six"></div>
        <div class="seven"></div>
        <div class="eight"></div>
    </section>
    <footer class="musicPlay" onclick="playPause()"></footer>
        <!--通过audio标签加载音频-->
        <!--loop:循环播放-->
        <!--preload：页面加载时进行加载，预播放。-->
        <audio id="music" loop autoplay="autoplay">
        <source src="img/music.mp3">
            你的浏览器不支持HTML5，换个浏览器吧！   
        </audio>
</body>
</html>
<script>
    // 通过id获取audio标签
    var audio = document.getElementById('music')
    var musicPlay = document.getElementsByClassName('musicPlay')[0]
    function playPause(){
        // 判断音频是否正在播放
        // paused:暂停
        // audio.paused获取到的值有两种情况：（1）true，暂停；（2）false，播放。
        if(audio.paused == true){
            // 如果音频是暂停的，那么就播放。
            musicPlay.style.backgroundImage = "url(img/sound.png)";
            audio.play();

        }
        else{
            // 否则，就暂停
            musicPlay.style.backgroundImage = "url(img/muted.png)";
            audio.pause();
        }
    }
</script>